import React, { useState, useEffect, useRef } from 'react';
import { useSearchParams, useNavigate } from 'react-router-dom';
import { Tabs } from 'antd-mobile';
import BookItem from '../../components/BookItem/BookItem';
// import InfiniteScroll from 'react-infinite-scroller';
import useTouchBottom from "../../hooks/useTouchBottom/index";
import './HomeRank.scss';
import SearchNav from '../../components/SearchNav/SearchNav';
function HomeRank(props) {
   const [searchParams, setSearchParams] = useSearchParams();
   let _id = searchParams.get('uuid')
   let _rt = searchParams.get('rankType')
   let navigate = useNavigate();
   // console.log(_id, _rt);
   const [rankda, setRankda] = useState([]);
   const [listurl, setListurl] = useState("");
   // 右边 列表项数据
   const [listda, setListda] = useState([]);
   // 右边 列表项数据
   let listData = useRef([]);
   // 顶部索引
   const [navindex, setNavindex] = useState(0);
   // 左边索引   动态
   const [sideindex, setSideindex] = useState(0);

   // 左边 数据
   const [leftd, setLeftd] = useState([]);
   // 下一页 
   // const [nextUrl, setNextUrl] = useState("");
   const nextUrl = useRef("");

   // 
   // 获取列表
   useEffect(() => {
      _id && _rt && React.axios.get('store/merged/rankNavi.json', {
         params: {
            uuid: _id,
            rankType: _rt
         }
      }).then(res => {
         console.log('排行榜数据---->', res.list[0].subNavis);
         setRankda(res.list)
         // 初始化  左边数据
         if (res.list[0].subNavis) {
            setLeftd(res.list[0].subNavis)
            tempArray(0, res.list[0].subNavis)
         }
      })
   }, [_id, _rt]);
   // 监听顶部索引
   useEffect(() => {
      console.log(navindex)
      setTimeout(() => {
         let len = navindex
         // console.log(len,rankda);
         // console.log(len,rankda[len].subNavis[0], rankda[len].subNavis[0].naviInfos[0].url);
         setLeftd(rankda[len].subNavis);
         // console.log('左边的数据----',leftd);
         // 重置左边索引
         setSideindex(0)
         // 重置数据
         let nUrl = rankda[len].subNavis[0].naviInfos[0].url
         setListurl(nUrl)
         // listurl.current = nUrl
      }, 200)
   }, [navindex])
   // 初始化
   let tempArray = (k, t) => {
      // console.log(k, t);
      let tUrl = t[k].naviInfos[0].url;
      // console.log(tUrl);
      setListurl(tUrl)
   };
   // 获取url
   let lisrFun = (i) => {
      console.log('------', i)
      setTimeout(() => {
         setSideindex(i)
         let tempArr = [...leftd];
         console.log(tempArr)
         let url = tempArr[i].naviInfos[0].url
         console.log(url)
         setListurl(url)
         // listurl.current = url
      }, 400);
      // console.log(i, url);
   }
   // 获取列表数据
   useEffect(() => {
      listurl && React.axios.get(listurl).then(res => {
         setListda(res.list)
         listData.current = res.list
         // console.log('获取列表数据url', res.list, res.more.url);
         // setNextUrl(res.more.url)
         nextUrl.current = res.more.url
      });
   }, [listurl]);
   // 上拉刷新
   const handleLoadMore = () => {
      // 
      console.log('触底了--------')
      nextUrl.current && React.axios.get(nextUrl.current).then(res => {
         // setListda(res.list)
         console.log('获取列表数据url----', res.list, res.more.url);
         // setNextUrl(res.more.url)
         // 下一页 
         nextUrl.current = res.more.url
         // 拼接数据
         listData.current = listData.current.concat(res.list)
         // 赋值
         setListda([...listData.current])
      });
   };

   useTouchBottom(handleLoadMore)

   return rankda && (
      <div className='rank_box'>
         <SearchNav />
         {/* 头部导航 */}
         <div className="rank_hd">
            {/* 男女 */}
            <div className='hd_sticky'>
               <Tabs activeKey={navindex}
                  onChange={(key) => setNavindex(key)}
               >
                  {rankda.map((item, index) => (
                     <Tabs.Tab title={item.name} key={index}>
                        {/* 数据放这里  进入页面  二级数据没反应 */}
                     </Tabs.Tab>
                  ))}
               </Tabs>
            </div>
            {/* 内容区 */}
            {/* <InfiniteScroll
                  // pageStart={1}
                  initialLoad={true}
                  threshold={200}
                  isReverse={true}
                  loadMore={loadFunc}
                  hasMore={true}
                  // loader={<div className="loader" key={0}>Loading ...</div>}
                  useWindow={true}
               > */}
            <div className="container">
               {/* 左边 */}
               <div className="con_left">
                  {/* <SideBar
                     style={{
                        "--width": "70px"
                     }}
                     // val = {[leftd]}
                     onChange={(e) => lisrFun(e)}>
                     {leftd.map((sue, sui) => (
                        <SideBar.Item key={sue.name} title={sue.name} />
                     ))}
                  </SideBar> */}
                  <ul className='left_sidebar'>
                     {leftd.map((sue, sui) => (
                        <li className={`s_item ${sideindex == sui ? 'active_co active_boxleft' : ''}`} key={sui}
                           onClick={() => lisrFun(sui)}
                        >{sue.name}</li>
                     ))}
                  </ul>
               </div>
               {/* 右边数据 */}

               {/* initialLoad={false} // 不让它进入直接加载
                  pageStart={1} // 设置初始化请求的页数
                  loadMore={this.loadMoreData}  // 监听的ajax请求
                  hasMore={hasMore} // 是否继续监听滚动事件 true 监听 | false 不再监听
                  useWindow={false} // 不监听 window 滚动条 */}
               <ul className="con_right">
                  {listda && listurl && listda.map((re, ri) => (
                     <BookItem key={ri} book={re} width={20}></BookItem>
                     // <p key={ri}>{book.author}</p>
                  ))}
               </ul>

            </div>
            {/* </InfiniteScroll> */}
         </div>
      </div>
   );
}

export default HomeRank;